<template name="appKeybaseConfirm">

<div class="small ui modal" id="ledgerConfirmationModal">
  <div class="header">Send Keybase Transaction?</div>
  <div class="content">
    <div class="ui stackable grid">
      <div class="four wide column">
        <img class="svg" src="/img/ledger-nano.svg" />
      </div>
      <div class="twelve wide column">
        <div class="description pl-10">
          <p>Your transaction requires confirmation on your Ledger Nano S device. Check the details on the Ledger match those displayed below then click the sign option on your device:</p>
          <div class="ui container">
            <table class="ui stackable table">
              <tr>
                <td>
                  <div class="ui label fw">FROM</div>
                </td>
                <td class="no-wrap">{{transferFrom.address}}</td>
              </tr>
              <tr>
                <td>
                  <div class="ui label fw">MESSAGE</div>
                </td>
                <td class="no-wrap">
                  {{ledgerVerificationMessage}}
                </td>
              </tr>
              <tr>
                <td>
                  <div class="ui label fw">FEE</div>
                </td>
                <td class="no-wrap">{{messageCreationConfirmation.fee}} Quanta</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="actions">
    <div id="awaitingLedgerConfirmation" class="ui inverted segment">
      <h3>Awaiting confirmation on Ledger device
        <div class="ui active inline loader"></div>
      </h3>
    </div>

    <div id="signOnLedgerRejected" class="ui inverted segment" style="display: none;">
      <h3>The Transaction has been rejected on Ledger device</h3>
      <h3 id="noRemainingSignatures" style="display: none;">There are no remaining signatures to sign a transaction with!</h3>
    </div>

    <div id="signOnLedgerTimeout" class="ui inverted segment" style="display: none;">
      <h3>Timed out waiting for response from Ledger Nano. To save an OTS Key, you should reject the transaction on your Ledger and try again.</h3>
    </div>

    <div id="signOnLedgerError" class="ui inverted segment" style="display: none;">
      <h3>Error communicating with Ledger Nano. To save an OTS Key, you should reject the transaction on your Ledger and try again.</h3>
    </div>

    <p id="ledgerHasConfirmed" style="display:none;">Transaction signed on Ledger <i class="ui check icon"></i></p>

    <div class="ui positive confirm button" id="relayLedgerTxnButton" style="display:none;">Send transaction</div>
    <div class="ui negative button">Cancel</div>
  </div>
</div>

<h2 class="ui header pageHeader">
  <i class="icon"><img src="/img/keybase.svg"></i>
  <div class="content">
    Keybase Confirmation
  </div>
</h2>

<div id="messageCreationConfirmation" class="ui red segment pageSegment">

  <h4 class="ui horizontal divider header">
    <i class="icon"><img src="/img/keybase.svg"></i>
    Your Keybase operation
  </h4>

  <div class="ui items">
    <div class="item">
      <div class="content">
        <div class="header">Keybase action</div>
        <div class="description"><p><div class="ui label">{{keybaseOperation.addorremove}}</div></p><p>&nbsp;</p></div>
        <div class="header">Keybase username</div>
        <div class="description"><p>{{keybaseOperation.keybaseId}}</p><p>&nbsp;</p></div>
        <div class="header">Keybase signature</div>
        <div class="description"><p>{{keybaseOperation.sigHash}}</p><p>&nbsp;</p></div>
      </div>
    </div>
  </div>

  {{#if isLedgerWallet}}
  <br />
  <h4 class="ui horizontal divider header">
    <i class="envelope icon"></i>
    Message as displayed on your Ledger Nano for verification
  </h4>
  <div class="ui items">
    <div class="item">
      <div class="content">
        <p style="word-wrap: break-word; word-break: break-all;">{{ledgerVerificationMessage}}</p>
      </div>
    </div>
  </div>
  {{/if}}

  <h4 class="ui horizontal divider header">
    <i class="file icon"></i>
    Transaction Details
  </h4>

  <div class="ui stackable one column grid">
    <div class="column">
      <span>From <a class="ui" style="overflow-wrap: break-word;">{{transferFrom.address}}</a></span>
      <br />
      <span>Fee <a class="ui">{{messageCreationConfirmation.fee}}</a></span>
      <br />
      <span>OTS Key Index <a class="ui">{{messageCreationConfirmation.otsKey}}</a></span>
    </div>
  </div>

  <div class="ui stackable two column grid">
    <div class="column center aligned">
      <button id="confirmMessage" class="ui huge primary button red">
        {{#if isSeedWallet}}
          Confirm Keybase Details
        {{else}}
          Sign with Ledger
        {{/if}}
      </button>
    </div>
    <div class="column center aligned">
      <button id="cancelMessage" class="ui huge red button plain">Cancel Message</button>
    </div>
  </div>

  <div id="relaying" class="ui icon message" style="display: none;">
    <br /><br />
    <i class="notched circle loading icon"></i>
    <div class="content">
      <div class="header">
        Just a moment
      </div>
      <p id="tokenRelayingMsg">Your message is being relayed into the QRL network...</p>
    </div>
  </div>

</div>

<div id="transactionFailed" class="ui red segment pageSegment" style="display: none;">
  <h4>Transaction Failed</h4>
  <p style="overflow-wrap: break-word">
    Error! Your message has failed to relay into the QRL network.<br /><br />
    Error message: {{transactionFailed}}
  </p>
</div>

</template>